<template>
  <div class="page" ref="printDom">
    <div>
      <h2 style="text-align: center">《送气单》</h2>
      <div style="display: flex; justify-content: space-between">
        <div>客户：{{ newData.name }}</div>
        <div>单据日期：2023年1月1日-2023年2月1日</div>
      </div>
      <div>
        <div style="margin-top: 5px">联系方式：13333333333</div>
        <div style="margin-top: 5px">客户地址：佛山市顺德区大良街道</div>
      </div>
    </div>
    <div style="margin-top: 15px">
      <h3>单据详情</h3>
      <div class="detail">
        <div v-for="(item, index) in newData.data" :key="index" class="type">
          <div style="font-weight: bold">{{ item.type }}</div>
          <div style="text-align: right; font-size: 14px">
            <span style="margin-right: 15px">单价</span>
            <span style="margin-right: 15px">数量</span>
            <span style="margin-right: 10px">合计</span>
          </div>
          <div
            v-for="(kitem, cindex) in item.values"
            :key="cindex"
            style="
              text-align: right;
              font-size: 14px;
              display: flex;
              justify-content: space-between;
              width: 50%;
              margin-left: auto;
            "
          >
            <div>
              <span style="margin-left: 50px">2023-1-{{ cindex + 1 }}</span>
            </div>
            <div>
              <span style="margin-right: 15px">{{ kitem.price }}￥</span>
              <span style="margin-right: 15px">{{ kitem.quantity }}</span>
              <span>{{ kitem.total }}￥</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="font-weight: bold">合计: 10000元</div>
    <button class="no-print" @click="print">打印</button>
    <button style="margin-left: 10px" class="no-print" @click="prev" :disabled="page==1">上一页</button>
    <button style="margin-left: 10px" class="no-print" @click="next" :disabled="page==length">下一页</button>
  </div>
</template>


<script>
import json from "./data.json";

export default {
  data() {
    return {
      page: 1,
      length: 0,
      // data: {
      //   name: "",
      //   data: [],
      // },
    };
  },
  computed: {
    newData() {
      return json[this.page - 1]
    }
  },
  created() {
    // this.data = json[this.page - 1];
    this.length = json.length
  },
  methods: {
    print() {
      this.$print(this.$refs.printDom, {});
    },
    prev() {
      this.page--
    },
    next() {
      this.page++
    }

  },
};
</script>

<style lang="stylus">
.page {
  margin: 0 auto;
  width: 620px;
  font: 16px Arial, microsoft Yahei, Verdana, sans-serif !important;

  .detail {
    padding: 10px;
    border: 1px solid #999999;

    .type {
      margin-bottom: 7px;
      padding-bottom: 5px;
      border-bottom: 1px dashed;
    }

    .type:last-child {
      border-bottom: none;
    }
  }
}

@media print {
  html, body {
    width: 210mm;
    height: 297mm;
    margin: 0;
    padding: 0;
  }

  .page {
    margin: 10mm auto;
    height: 277mm;
  }
}
</style>